<template>
  <div class="user-manage">
    <div class="query-form">
      <!-- query-form全局组件<=main.js -->
      <query-form :form="form" v-model="user" @handleQuery="handleQuery" />
    </div>

    <!-- 全局组件<=main.js<=Rocket -->
    <base-table
      :columns="columns"
      :data="userList"
      :pager="pager"
      @selection-change="handleSelectionChange"
      @handleAction="handleAction"
      @handleCurrentChange="handleCurrentChange"
    >
      <template v-slot:action>
        <el-button
          type="primary"
          @click="handleCreate"
          v-has:add="'user-create'"
          >+新增</el-button
        >
        <el-button
          @click="handlePatchDel"
          type="danger"
          v-has="'user-patch-delete'"
          >批量删除</el-button
        ></template
      >
    </base-table>
    <el-dialog title="用户新增" v-model="showModal">
      <el-form
        ref="dialogForm"
        :model="userForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model="userForm.userName"
            :disabled="action == 'edit'"
            placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="userEmail">
          <el-input
            v-model="userForm.userEmail"
            :disabled="action == 'edit'"
            placeholder="请输入邮箱"
          >
            <template #append>@imooc.com</template>
          </el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="userForm.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="岗位" prop="job">
          <el-input v-model="userForm.job" placeholder="请输入岗位" />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="userForm.state">
            <el-option :value="1" label="在职"></el-option>
            <el-option :value="2" label="离职"></el-option>
            <el-option :value="3" label="试用期"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系统角色" prop="roleList">
          <el-select
            v-model="userForm.roleList"
            placeholder="请选择系统角色"
            multiple
            style="width: 100%"
          >
            <el-option
              v-for="role in roleList"
              :key="role._id"
              :label="role.roleName"
              :value="role._id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <el-cascader
            v-model="userForm.deptId"
            placeholder="请选择所属部门"
            :options="deptList"
            :props="{ checkStrictly: true, value: '_id', label: 'deptName' }"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from 'vue';
import utils from '../utils/utils';
import Modal from '../components/Modal.vue';

//   获取Composition API 上下文对象
const { proxy } = getCurrentInstance();
// 初始化用户表单对象
const user = ref({
  state: 1,
});
// 初始化用户列表数据
const userList = ref([]);
// 初始化分页对象
const pager = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});
// 选中用户列表的对象
const checkedUserIds = ref([]);
// 弹框显示对象
const showModal = ref(false);
// 新增用户Form对象
const userForm = reactive({
  state: 3,
});
// 所有角色列表
const roleList = ref([]);
// 所有部门列表
const deptList = ref([]);
// 定义用户操作行为
const action = ref('add');
// 定义表单校验规则
const rules = reactive({
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  userEmail: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  mobile: [
    {
      pattern: /^1[3-9]\d{9}/,
      message: '请输入正确的手机号格式',
      trigger: 'blur',
    },
  ],
  deptId: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
});
const form = [
  {
    type: 'input',
    label: '用户ID',
    model: 'userId',
    placeholder: '请输入用户ID',
  },
  {
    type: 'input',
    label: '用户名称',
    model: 'userName',
    placeholder: '请输入用户名称',
  },
  {
    type: 'select',
    label: '状态',
    model: 'state',
    placeholder: '请选择状态',
    options: [
      { label: '所有', value: 0 },
      { label: '在职', value: 1 },
      { label: '离职', value: 2 },
      { label: '试用期', value: 3 },
    ],
  },
];
// 定义动态表格-格式
const columns = reactive([
  { type: 'selection' },
  { label: '用户ID', prop: 'userId' },
  { label: '用户名', prop: 'userName' },
  { label: '用户邮箱', prop: 'userEmail', width: 150 },
  {
    label: '用户角色',
    prop: 'role',
    formatter(row, column, value) {
      return { 0: '管理员', 1: '普通用户' }[value];
    },
  },
  {
    label: '用户状态',
    prop: 'state',
    width: 80,
    formatter(row, column, value) {
      return {
        1: '在职',
        2: '离职',
        3: '试用期',
      }[value];
    },
  },
  {
    label: '注册时间',
    prop: 'createTime',
    width: 180,
    formatter: (row, column, value) => {
      // value为一个是字符串,所以要new Date()
      return utils.formateDate(new Date(value));
    },
  },
  {
    label: '最后登陆时间',
    prop: 'lastLoginTime',
    width: 180,
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
  {
    type: 'action',
    label: '操作',
    width: 150,
    list: [
      { type: 'primary', text: '编辑', visible: true, has: 'user-edit' },
      { type: 'danger', text: '删除', visible: true, has: 'user-delete' },
    ],
  },
]);

// 获取用户列表
const getUserList = async () => {
  let params = { ...user.value, ...pager };
  try {
    const { list, page } = await proxy.$api.getUserList(params);
    userList.value = list;
    pager.total = page.total;
  } catch (error) {
    console.log(error);
  }
};
onMounted(() => {
  getUserList();
  getDeptList();
  getRoleAllList();
});
// 查询事件，获取用户列表
const handleQuery = (values) => {
  // console.log(values, user.value);
  getUserList();
};
// 重置查询表单
const handleReset = (form) => {
  proxy.$refs[form].resetFields();
};
// 分页事件处理
const handleCurrentChange = (current) => {
  pager.pageNum = current;
  getUserList();
};
// 用户单个删除
const handleDel = async (row) => {
  let res = await proxy.$api.userDel({
    userIds: [row.userId],
  });
  proxy.$message.success('删除成功');
  getUserList();
};
// 批量删除
const handlePatchDel = async () => {
  if (checkedUserIds.value.length == 0) {
    proxy.$message.error('请选择要删除的用户');
    return;
  }
  const res = await proxy.$api.userDel({
    userIds: checkedUserIds.value,
  });
  if (res.modifiedCount > 0) {
    proxy.$message.success('删除成功');
    getUserList();
  } else {
    proxy.$message.success('删除失败');
  }
};
// 表格多选
const handleSelectionChange = (list) => {
  let arr = [];
  list.map((item) => arr.push(item.userId));
  checkedUserIds.value = arr;
};
// 用户新增
const handleCreate = () => {
  action.value = 'add';
  showModal.value = true;
};
// 获取部门列表
const getDeptList = async () => {
  let list = await proxy.$api.getDeptList();
  deptList.value = list;
};
// 角色列表查询
const getRoleAllList = async () => {
  let list = await proxy.$api.getRoleAllList();
  roleList.value = list;
};
// 用户弹窗关闭
const handleClose = () => {
  showModal.value = false;
  handleReset('dialogForm');
};
// 用户提交
const handleSubmit = () => {
  proxy.$refs.dialogForm.validate(async (valid) => {
    if (valid) {
      let params = toRaw(userForm); // toRaw 吧响应式对象转为为普通对象
      params.userEmail += '@imooc.com';
      params.action = action.value;
      let res = await proxy.$api.userSubmit(params);
      showModal.value = false;
      proxy.$message.success('操作成功');
      handleReset('dialogForm');
      getUserList();
    }
  });
};
const handleAction = ({ index, row }) => {
  if (index == 0) {
    handleEdit(row);
  } else if (index == 1) {
    handleDel(row);
  }
};
// 用户编辑
const handleEdit = (row) => {
  action.value = 'edit';
  showModal.value = true;
  // 等DOM执行完之后再执行里面代码, 解决重置失效问题
  proxy.$nextTick(() => {
    Object.assign(userForm, row);
  });
};
</script>

<style lang="scss"></style>
